<template>
  <view :style="colorStyle">
    <!-- <view class="infobox1" v-if="!poster">
			<image src="@/static/img85.png" class="bg" mode="widthFix"></image>
			<view class="block1">
				<view class="bgs">
					<image src="@/static/img86.png" class="bgs" mode="widthFix"></image>
					<view class="info1 flex aitems">
						<image :src="info.avatar" mode=""></image>
						<view class="tipbox1 c1F1F1F f36 fontWeight">
							{{info.nickName}}
						</view>
					</view>
					<image :src="qrcode" class="qrocde" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
    <image
      v-if="poster"
      :src="poster"
      mode="widthFix"
      style="width: 100%"
    ></image>
    <canvas
      v-if="!poster"
      :style="{ height: `${bgHeight}px` }"
      canvas-id="canvas"
      disable-scroll="true"
      class="canvasBox"
    ></canvas>

    <view style="height: 130rpx"> </view>
    <view class="infobox3">
      <view class="block1" @click="saveImg"> 保存图片 </view>
    </view>
  </view>
</template>

<script>
import { userinfo, config as configAPI } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { go, loading, msg } from "../../utils/wxAPI";
import { getToken } from "../../utils/storage";
import baseUrl from "@/servers/baseUrl";
export default {
  mixins: [colors],
  data() {
    return {
      poster: "",
      info: {},
      qrcode: "",
      bgHeight: 0,
      width: uni.getSystemInfoSync().windowWidth,
      height: uni.getSystemInfoSync().windowHeight,
      bgImg: "http://xpj40szpt.signalpha.cn/img/img85.png",
      // bgImg: 'http://xpj40szpt.signalpha.cn/upload/image/20240726/18155722159350750.png',
      localBgImg: "",
    };
  },
  async onLoad(options) {
    if (getToken()) {
      await this.userinfo();
      await this.config();
      /***下载二维码****/
      this.downloadFileQrCode()
        .then()
        .then(() => {
          console.log(this.qrcode);
          this.downloadFileBgImg();
        });
    }
  },
  methods: {
    async config() {
      let { data } = await configAPI({
        key: "imgs",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let share = JSON.parse(data.data).share;
        this.bgImg = share;
      }
    },
    async downloadFileQrCode() {
      return new Promise((reslove, reject) => {
        uni.downloadFile({
          url: `${baseUrl}/server-auth/wechat/share/code?scene=${this.info.id}&url=pages/index/index`,
          header: {
            token: getToken(),
            "User-Type": "wap",
            Authorization: "d2FwOlpNOUtuNU50SA==",
          },
          success: async (res) => {
            console.log(res);
            reslove();
            this.qrcode = res.tempFilePath;
          },
          fail: (err) => {
            console.log(err);
            reject();
          },
        });
      });
    },
    async downloadFileBgImg() {
      uni.downloadFile({
        url: this.bgImg,
        header: {
          "Access-Control-Expose-Headers": "Content-Disposition",
        },
        success: async (res) => {
          console.log(res);
          let tempFilePath = res.tempFilePath;
          uni.getImageInfo({
            src: tempFilePath,
            success: async (res) => {
              console.log(res);
              let bgHeight = res.height * (this.width / res.width);
              console.log(bgHeight);
              this.bgHeight = bgHeight < 700 ? 700 : bgHeight;
              this.localBgImg = res.path;
              setTimeout(() => {
                this.canvasPainting();
              }, 1000);
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    async canvasPainting() {
      if (this.poster) return uni.hideLoading();
      loading();
      let context = uni.createCanvasContext("canvas");
      context.setFillStyle("#fff");
      context.fillRect(0, 0, this.width, this.bgHeight);
      context.drawImage(this.localBgImg, 0, 0, this.width, this.bgHeight);
      context.drawImage(
        "/static/img86.png",
        37.5,
        181,
        this.width - 75,
        this.width - 75 + (this.width - 75) / 3
      );
      context.drawImage(
        this.qrcode,
        97.5,
        340,
        this.width - 195,
        this.width - 195
      );
      context.drawImage(this.info.avatar, 61, 201, 60, 60);
      context.setFillStyle("#1F1F1F"); //字体颜色
      context.font = "normal bold 16px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(`${this.info.nickName}`, 131, 238);
      context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
      context.stroke();
      context.setStrokeStyle("#fff");
      context.draw();
      let that = this;
      setTimeout(() => {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: that.width,
          height: that.bgHeight,
          canvasId: "canvas",
          success(res) {
            console.log(res);
            let poster = res.tempFilePath;
            that.poster = poster;
            // console.log(poster)
            uni.hideLoading();
          },
          fail(err) {
            console.log(err);
            uni.hideLoading();
          },
        });
      }, 500);
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
        uni.downloadFile({
          url: `${this.info.avatar}`,
          success: async (res) => {
            this.info.avatar = res.tempFilePath;
          },
          fail: (err) => {
            console.log(err);
          },
        });
      }
    },
    saveImg() {
      // this.canvasPainting()
      // #ifdef H5
      msg("请长按图片保存");
      // #endif
      // #ifdef MP-WEIXIN
      loading();
      uni.saveImageToPhotosAlbum({
        filePath: this.poster,
        success(res) {
          msg("保存成功");
        },
        fail(err) {
          uni.hideLoading();
          if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
            uni.showModal({
              title: "提示",
              content: "请点击打开权限",
              success(res) {
                if (res.confirm) {
                  uni.openSetting();
                }
              },
            });
          }
        },
      });
      // #endif
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  width: 100%;
}

.infobox1 {
  position: relative;

  .block1 {
    position: absolute;
    z-index: 1;
    top: 186rpx;
    width: 100%;

    .bgs {
      width: 600rpx;
      height: 800rpx;
      border-radius: 28rpx;
      margin: auto;
      position: relative;
    }

    .info1 {
      position: absolute;
      top: 40rpx;
      z-index: 1;
      left: 47rpx;
      // width: 600rpx;/4
      // margin: auto;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .tipbox1 {
        margin-left: 20rpx;
        width: calc(100% - 20rpx - 120rpx);
      }
    }

    .qrocde {
      position: absolute;
      z-index: 1;
      top: 300rpx;
      left: 50%;
      margin-left: -200rpx;
      width: 400rpx;
      // height: 488rpx;
    }
  }
}

.canvasBox {
  width: 100%;
  background: #fff;
}

.infobox3 {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 0 0 50rpx 0;

  .block1 {
    margin: 10rpx 30rpx 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }

  .block2 {
    margin: 30rpx 0 0;

    .info1 {
      width: 32rpx;
    }

    .info2 {
      margin-left: 10rpx;

      .tip1 {
        color: #999;
        font-size: 24rpx;
      }

      .tip2 {
        font-size: 24rpx;
        color: #f65b49;
      }
    }
  }
}
</style>
